<template>
  <div class>
    <div class="tabs-section" v-if="!hideNav">
      <Tabs :animated="false" :value="active" @on-click="changeRoute">
        <!-- <TabPane label="薪资组" name="group">
          <router-view></router-view>
        </TabPane> -->
        <TabPane label="考勤计薪规则" name="attendance">
          <router-view></router-view>
        </TabPane>
        <!-- <TabPane label="计税规则" name="tax">
          <router-view></router-view>
        </TabPane>
        <TabPane label="津补贴规则" name="allowance">
          <router-view></router-view>
        </TabPane> -->
      </Tabs>
    </div>
    <div class="rule-sub" v-if="hideNav">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: "attendance"
    };
  },

  methods: {
    changeRoute(e) {
      console.log(e);
      this.active = e;
      let route = "/payroll/salary/rule/" + e;
      this.$router.push(route);
    }
  },
  computed: {
    hideNav() {
      //隐藏tabs
      let route = this.$route.matched;
      let matched = route[route.length - 1].path;
      return (
        matched.includes("group/add") ||
        matched.includes("attendance/detail") ||
        matched.includes("tax/detail") ||
        matched.includes("allowance/add")
      );
    }
  }
};
</script>
<style lang="scss" scoped src='./index.scss'>
</style>